<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D旋转木马效果</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <style>
      body {
        background-color: #000;
      }

      .scene {
        width: 600px;
        height: 300px;
        /* border:2px solid red; */
        margin: 150px auto 0px;
        perspective: 800px;
      }

      .scene .box {
        width: 600px;
        height: 300px;
        /* background-color: yellow; */
        /* transition: all ease 1s; */
        transform-style: preserve-3d;
        animation: rotate 3s ease infinite;
        position: relative;
      }

      .scene .box:hover {
        animation-play-state: paused;
      }

      .box .item {
        width: 200px;
        height: 200px;
        background-color: pink;
        position: absolute;
        bottom: 0px;
        left: 50%;
        margin-left: -100px;
        transform: rotateY(calc(var(--i) * 40deg)) translateZ(300px);
      }

      @keyframes rotate {
        /* 注意旋转次序 */
        0% {
          transform: rotateX(-10deg) rotateY(0deg);
        }
        100% {
          transform: rotateX(-10deg) rotateY(-360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="scene">
      <div class="box">
        <div class="item" style="--i: 0"><img src="images/3dmm-01.webp" alt="" width="200" height="200" /></div>
        <div class="item" style="--i: 1"><img src="images/3dmm-02.webp" alt="" width="200" height="200" /></div>
        <div class="item" style="--i: 2"><img src="images/3dmm-03.webp" alt="" width="200" height="200" /></div>
        <div class="item" style="--i: 3"><img src="images/3dmm-04.webp" alt="" width="200" height="200" /></div>
        <div class="item" style="--i: 4"><img src="images/3dmm-05.webp" alt="" width="200" height="200" /></div>
        <div class="item" style="--i: 5"><img src="images/3dmm-06.webp" alt="" width="200" height="200" /></div>
        <div class="item" style="--i: 6"><img src="images/3dmm-07.webp" alt="" width="200" height="200" /></div>
        <div class="item" style="--i: 7"><img src="images/3dmm-08.webp" alt="" width="200" height="200" /></div>
        <div class="item" style="--i: 8"><img src="images/3dmm-09.webp" alt="" width="200" height="200" /></div>
      </div>
    </div>
  </body>
</html>
